<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons"></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center"
          style="color: #000; font-size: 36rpx"
        >
        </view>
        <!-- 右侧按钮 -->
        <view
          class="icons"
          style="font-size: 38rpx; position: relative"
          v-if="i18n"
          @tap.stop="languageShow = true"
        >
          <cloudIcon
            name="icondongtai"
            style="font-size: 42rpx; color: rgb(100, 130, 245)"
          ></cloudIcon>
          <gracePopupMenu
            @hideMenu="hideMenu"
            ref="gracePopupMenu"
            :show="languageShow"
            :top="30"
            bgColor="#000"
          >
            <view class="langauge_box">
              <block v-for="(item, index) in locales" :key="index">
                <view
                  class="menus"
                  @tap.stop="onTapSwitchLang(item.value)"
                  :data-id="index"
                  >{{ item.title }}</view
                >
              </block>
            </view>
          </gracePopupMenu>
        </view>
      </view>
    </cloudHeader>
    <view class="container">
      <!-- banner轮播 -->
      <view class="p-20">
        <swiper
          class="swiper"
          :indicator-dots="true"
          :autoplay="true"
          :interval="3000"
          :duration="500"
          :circular="true"
        >
          <swiper-item
            class="swiper_item"
            v-for="(item, index) in banner"
            :key="index"
          >
            <image :src="item" class="swiper_image" />
          </swiper-item>
        </swiper>
      </view>
      <!-- 系统公告 -->
      <view class="p-32" style="maring-bottom: 36rpx">
        <view
          class="notice flex"
          @tap.stop="handleNavTo({ url: '/pages/mf/announce/index' })"
        >
          <image src="/static/mf/home/notice.png" class="notice_icon" />
          <swiper
            class="swiper_notice flex1"
            :indicator-dots="false"
            :autoplay="true"
            :interval="3000"
            :duration="500"
            :circular="true"
            :vertical="true"
          >
            <swiper-item
              class="swiper_item"
              v-for="(item, index) in announcement.data"
              :key="index"
            >
              <view class="notice_text">{{ item.value.title }}</view>
            </swiper-item>
          </swiper>
          <image
            src="/static/mf/home/arrow.png"
            style="width: 19rpx; height: 32rpx"
          />
        </view>
      </view>
      <!-- FIL矿池 -->
      <view class="fil_box">
        <view class="fil_box_title">{{ $t("mf.home.filmining") }}</view>
        <view class="flex" style="margin-bottom: 40rpx">
          <view class="flex1">
            <view class="fil_data_title">{{ $t("block.block_height") }}</view>
            <view class="fil_data_numbe">{{
              block && block.latest_height
            }}</view>
          </view>
          <view class="flex1"
            ><view class="fil_data_title">{{ $t("block.WinCount") }}</view>
            <view class="fil_data_numbe"
              >{{
                block && parseFloat(block.latest_block_reward).toFixed(2)
              }}
              FIL</view
            ></view
          >
        </view>
        <view class="flex">
          <view class="flex1">
            <view class="fil_data_title">{{ $t("block.Power") }}</view>
            <view class="fil_data_numbe"
              >{{
                block && parseFloat(block.fil_per_tera).toFixed(4)
              }}
              FIL/T</view
            >
          </view>
          <view class="flex1"
            ><view class="fil_data_title">{{
              $t("block.QualityAdjPower")
            }}</view>
            <view class="fil_data_numbe">{{
              block && block.total_quality_power
            }}</view></view
          >
        </view>
      </view>
      <!-- 币种价格 -->
      <view class="p-20rpx">
        <view class="symbol_box">
          <block v-for="(item, index) in assets" :key="index">
            <view class="aymbol_list flex" v-if="item.symbol != 'USDT'">
              <image
                :src="`/static/mf/home/coin/${item.symbol}.png`"
                class="symbol_icon"
              />
              <view class="symbol_text">{{ item.symbol }}</view>
              <view class="symbol_price flex1"
                >${{ item.coin.price.USDT }}</view
              >
              <view class="symbol_ratio">{{ item.change_ratio }}%</view>
              <image
                src="/static/mf/home/up.png"
                class="tatio_icon"
                v-if="parseFloat(item.change_ratio) > 0"
              />
              <image src="/static/mf/home/down.png" class="tatio_icon" v-else />
            </view>
          </block>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import homeBox from "./compontents/homeBox";
export default {
  components: {
    homeBox,
  },
  data() {
    return {
      languageShow: false,
      block: null,
    };
  },
  methods: {
    ...mapActions("asset", ["loadAssets"]),
    ...mapActions("mf/home", ["loadArticleList", "getfilInfo"]),
    ...mapActions("announcement", ["loadAnnouncement"]),
    ...mapActions("system", ["switchLocale"]),
    hideMenu() {
      this.languageShow = false;
    },
    onTapSwitchLang(locale) {
      this.switchLocale({ locale });
      this.loadArticleList();
      this.loadAnnouncement();
      this.setTabBarLang({ locale: locale });
      this.hideMenu();
    },
    moreInfoList() {
      // 去资讯列表页面
      this.handleNavTo({ url: "/pages/mf/home/articleList" });
    },
    artcleDetail(id) {
      this.handleNavTo({ url: "/pages/mf/home/articleDetail?id=" + id });
    },
  },
  computed: {
    ...mapState("asset", ["assets"]),
    ...mapGetters("mf/home", ["articleList"]),
    ...mapGetters("announcement", ["announcement"]),
    ...mapGetters("system", ["locales", "locale"]),
    ...mapGetters({ currentLocale: "system/locale" }),
    ...mapGetters("system", ["i18n"]),
    banner() {
      if (this.locale == "zh_TW") {
        return [
          "/static/banner/banner6.jpeg",
          "/static/banner/banner1.jpg",
          "/static/banner/banner2.jpg",
          "/static/banner/banner3.jpg",
          "/static/banner/banner4.jpg",
          "/static/banner/banner5.jpg",
        ];
      } else {
        return [
          "/static/banner/banner6_en.jpeg",
          "/static/banner/banner1.jpg",
          "/static/banner/banner2_en.jpg",
          "/static/banner/banner3_en.jpg",
          "/static/banner/banner4.jpg",
          "/static/banner/banner5_en.jpg",
        ];
      }
    },
  },
  async onShow() {
    console.log(this.currentLocale);
    this.setTabBarLang({ locale: this.currentLocale });
    // await this.loadArticleList({ limit: 5 });
    await this.loadAnnouncement();
    this.block = await this.getfilInfo();
    await this.loadAssets();
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx 0rpx 100rpx;
  position: absolute;
  top: 50rpx;
}
.swiper {
  width: 100%;
  height: 320rpx;
  border-radius: 10rpx;
}
.swiper_item {
  border-radius: 10rpx;
}
.swiper_image {
  width: 100%;
  height: 320rpx;
}
.notice {
  width: 100%;
  height: 88rpx;
  /* background: rgba(255, 157, 69, 0.1); */
  box-sizing: border-box;
  margin-bottom: 40rpx;
  align-items: center;
  border-bottom: 1px dashed rgba(254, 224, 150, 0.3);
}
.notice_icon {
  width: 36rpx;
  height: 36rpx;
}
.swiper_notice {
  height: 88rpx;
  /* width: 460rpx; */
  line-height: 88rpx;
  box-sizing: border-box;
  padding: 0 40rpx;
}
.notice_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 230, 123, 1);
}
.nav_item {
  width: 100%;
  box-sizing: border-box;
  padding: 0 100rpx;
  border-bottom: 1px solid #ebebeb;
}
.fil_data {
  width: 100%;
  background: #121624;
  border-radius: 8rpx;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  text-align: center;
}
.fil_data_box {
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
  height: 124rpx;
  /* border: 1px solid rgba(255, 255, 255, 0.1); */
  padding-top: 20rpx;
}
.bdbr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.bdtl {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.fil_data_title {
  height: 33rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #898989;
  line-height: 33rpx;
  margin-bottom: 10rpx;
  transform: scale(0.9);
}
.fil_data_numbe {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fff;
  line-height: 42rpx;
}
.asstes_list {
  height: 87rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  text-align: center;
  line-height: 87rpx;
  color: #fff;
  align-items: center;
  text-align: left;
}
.symbol_name {
  margin-right: 60rpx;
  width: 100rpx;
}
.asstes_list image {
  width: 40rpx;
  height: 40rpx;
  margin-left: 50rpx;
  margin-right: 20rpx;
}
.asstes_list:last-child {
  border-bottom: none;
}
.info_box {
  width: 100%;
  background: #121624;
  border-radius: 10px;
  overflow: hidden;
}
.info_item {
  width: 100%;
  height: 227rpx;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30rpx 20rpx;
}
.info_item_left {
  box-sizing: border-box;
  padding: 12rpx 0 12rpx;
}
.info_item_right {
  width: 223rpx;
  height: 167rpx;
  margin-left: 30rpx;
}
.info_item_right image {
  width: 100%;
  height: 100%;
  border-radius: 10rpx;
}
.info_item_title {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: 40rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.info_publisher {
  color: rgba(255, 255, 255, 0.6);
  font-size: 24rpx;
}
.info_item_info {
  line-height: 42rpx;
}
.change_ratio {
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
}

#up_down_image {
  width: 10px;
  height: 34rpx;
  margin-right: 30rpx;
  margin-left: 20rpx;
}
.p-32 {
  box-sizing: border-box;
  padding: 0 32rpx;
}
.p-20 {
  padding: 20rpx;
  box-sizing: border-box;
}
.fil_box {
  width: 100%;
  height: 354rpx;
  padding: 19rpx 68rpx;
  box-sizing: border-box;
  background-image: url("/static/mf/home/kuangchi_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
}
.fil_box_title {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 45rpx;
  margin-bottom: 50rpx;
}
.symbol_box {
  width: 100%;
  height: 658rpx;
  padding: 0 46rpx;
  box-sizing: border-box;
}
.aymbol_list {
  width: 100%;
  height: 154rpx;
  border-bottom: 1px solid rgba(254, 224, 150, 0.3);
  align-items: center;
}
.aymbol_list:last-child {
  border-bottom: none;
}
.symbol_icon {
  width: 66rpx;
  height: 66rpx;
  margin-right: 30rpx;
}
.symbol_text {
  width: 70rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 45rpx;
  margin-right: 80rpx;
}
.symbol_price {
  height: 37rpx;
  font-size: 32rpx;
  font-family: Helvetica;
  color: #ffffff;
  line-height: 38rpx;
}
.symbol_ratio {
  width: 100rpx;
  height: 45rpx;
  font-size: 32rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #ffffff;
  line-height: 37rpx;
  margin-right: 13rpx;
  text-align: right;
}
.tatio_icon {
  width: 17rpx;
  height: 25rpx;
  margin-right: 20rpx;
}
</style>